<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/manager.css">
    <style>

    </style>
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="昵称"
                    prop="nickname">
            </el-table-column>
            <el-table-column
                    label="用户名"
                    prop="username">
            </el-table-column>
            <el-table-column
                    label="密码"
                    prop="password">
            </el-table-column>
            <el-table-column
                    label="电话"
                    prop="phoneNumber">
            </el-table-column>
            <el-table-column
                    label="状态"
                    prop="status">
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
<!--                    <el-button-->
<!--                            size="mini"-->
<!--                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                    <el-button
                            v-if="scope.row.status === 1"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">禁用</el-button>
                    <el-button
                            v-else
                            size="mini"
                            type="primary"
                            @click="handleDelete(scope.$index, scope.row)">启用</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){
            this.pageInit();
        },
        methods : {
            pageInit() {
                axios({
                    method: 'get',
                    url: '/backgroundData/user'
                }).then((resp)=>{
                    this.tableData = resp.data.data
                })
            },
            handleEdit(index, row) {
                //row表示该行数据
                console.log(row.nickname);
            },
            handleDelete(index, row) {
                console.log(row.nickname);
                var _status = row.status === 0 ? 1 : 0
                axios({
                    method: 'delete',
                    url : '/backgroundData/user/'+row.id +'/'+ _status,
                }).then((resp)=>{
                    if (resp.data.code === 1) {
                        this.$message({
                            message : resp.data.data,
                            type : 'success'
                        })
                    }else {
                        this.$message({
                            message : resp.data.msg,
                            type : 'warning'
                        })
                    }
                });
                this.pageInit();
            }
        },
        data(){
            return {
                tableData: [
                    {
                        id : '',
                        username : '',
                        gender : '',
                        creatTime : '',
                        icon : '',
                        password : '',
                        phoneNumber : '',
                        nickname : '',
                    },
                ],
                search: ''
            }
        }
    })
</script>
</html>